@import "config";
html{
  overflow: hidden;
  .web{
    background: url("../img/bg_img.png") no-repeat center/cover;
    & > div{
      transition: $tiSoSlow;
      overflow: hidden;
    }
  }
  .web,.web > div,img{
     height: 100%;
   }
}


/*****************按钮********************/
.btn {
  padding: hr(10) hr(10);
  text-align: center;
  border-radius: $radius;
  background: $red;
  border: none;
  color: #e7c598;
  font-size: hr(20);
}
.btn_wth_195{
  width: hr(195);
}
.btn_wth_327{
  width: hr(327);
}
.btn_wth_222{
  width: hr(222);
}

/*****************背景按钮********************/
.text-btn{
  width: hr(318);
  height: hr(45);
  line-height: hr(45);
  font-size: hr(24);
  text-align: center;
  color: $yellow;
  background: url("../img/textbg.png") no-repeat center/100% 100%;
  margin: 0 auto;
}

/*****************右下角主页icon********************/
.back-start{
  display: none;
  font-size: hr(40);
  color: $yellow;
  position: absolute;
  right: hr(40);
  bottom: hr(25);
  z-index: 8;
}

/*****************右上角音乐icon********************/
.music{
  font-size: hr(40);
  color: $yellow;
  position: absolute;
  right: hr(40);
  top: hr(25);
  z-index: 10;
}
.icon-music{
  animation: music 5s linear infinite;
}
@keyframes music {
  from{transform: rotate(0deg)}
  to  {transform: rotate(360deg)}
}

/*****************有文字的输入框********************/
.text_put{
  .put {
    width: hr(183);
    height: hr(37);
    background: #e7c598;
    padding: hr(5) hr(10);
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
    border: none;
    color: #000;
    font-size: hr(20);
  }
  .kind{
    width: hr(183);
    height: hr(37);
    line-height: hr(37);
    padding: 0 hr(15);
    border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
    border-right: 1px solid $red;
    color: $red;
    background: #e7c598;
    font-size:hr(20);
  }
}

/**********输入框*****************/
.put_wh{
  width: hr(308);
  height: hr(52);
  font-size: hr(32);
  padding: hr(5) hr(10);
  border-radius: $radius;
  color: #000;
  background: #e7c598;
  border: none;
}

/****************弹窗********************/
.back {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  .pop_box{
    width: hr(400);
    @include posAbsCenter;
  }
  .pop_up {
    border-radius: $radiusBig;
    padding: hr(40) hr(50);
    background: #e7c598;
    text-align: center;
    transform: rotateX(90deg) scale(0);
    transition: $tiFast linear;
    p {
      font-size: hr(20);
      margin-top: hr(13);
      color: $red;
    }
    .btn {
      margin-top: hr(20);
    }
    span{
      display: block;
      font-size: hr(50);
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(-25%,25%);
      color: $red;
    }
    &.popshow{
      transform: rotateX(0deg) scale(1);
    }
  }
}

/***********省份切换*********************/
#cuted{
  width: hr(96);
  height: hr(36);
  background: #e7c598;
  border-radius: $radius;
  padding: hr(5) hr(10);
  i,span{
    display: inline-block;
    font-size: hr(22);
    line-height: hr(26);
    color: $red;
    float: left;
    transition: $ti;
  }
  span{
    margin-left: hr(5);
  }
  #pro_hn{
    display: none;
  }
  .i-rotate{
    transform: rotateZ(180deg);
  }
}

/***********提示****************/
.tips{
  display: none;
  @include posAbsAll;
  top: 60%;
  margin: auto;
  width: hr(400);
  height: hr(100);
  line-height: hr(100);
  color: #fff;
  background: rgba(0,0,0,0.5);
  border-radius: $radiusBig;
  text-align: center;
  font-style: normal;
  z-index: 99;
}